import React from 'react';
import {
  Box,
  Typography,
  Paper,
  Grid,
  Card,
  CardMedia,
  Chip,
  Divider,
} from '@mui/material';
import { Image, VideoFile } from '@mui/icons-material';
import { ContentType } from '../../../types';

interface CreateData {
  contentType: ContentType;
  title: string;
  textContent: string;
  cover?: File;
  images?: File[];
  video?: File;
}

interface CreateSummaryProps {
  data: CreateData;
}

const CreateSummary: React.FC<CreateSummaryProps> = ({ data }) => {
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  return (
    <Box>
      <Typography variant="h6" gutterBottom sx={{ mb: 3, textAlign: 'center' }}>
        确认创建内容
      </Typography>

      <Paper elevation={1} sx={{ p: 3 }}>
        {/* 基本信息 */}
        <Box sx={{ mb: 3 }}>
          <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            {data.contentType === ContentType.IMAGE ? <Image /> : <VideoFile />}
            基本信息
          </Typography>
          
          <Box sx={{ pl: 2 }}>
            <Typography variant="body1" sx={{ mb: 1 }}>
              <strong>内容类型：</strong>
              <Chip 
                label={data.contentType === ContentType.IMAGE ? '图片内容' : '视频内容'}
                color={data.contentType === ContentType.IMAGE ? 'primary' : 'secondary'}
                size="small"
                sx={{ ml: 1 }}
              />
            </Typography>
            
            <Typography variant="body1" sx={{ mb: 1 }}>
              <strong>标题：</strong>{data.title}
            </Typography>
            
            <Typography variant="body1" sx={{ mb: 2 }}>
              <strong>描述：</strong>
            </Typography>
            <Paper variant="outlined" sx={{ p: 2, bgcolor: 'grey.50' }}>
              <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                {data.textContent}
              </Typography>
            </Paper>
          </Box>
        </Box>

        <Divider sx={{ my: 3 }} />

        {/* 媒体文件 */}
        <Box>
          <Typography variant="h6" gutterBottom>
            媒体文件
          </Typography>

          {/* 封面 */}
          {data.cover && (
            <Box sx={{ mb: 3 }}>
              <Typography variant="subtitle2" gutterBottom>
                封面图片
              </Typography>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                <img
                  src={URL.createObjectURL(data.cover)}
                  alt="封面预览"
                  style={{
                    width: '120px',
                    height: '90px',
                    objectFit: 'cover',
                    borderRadius: '8px',
                  }}
                />
                <Box>
                  <Typography variant="body2" color="text.secondary">
                    {data.cover.name}
                  </Typography>
                  <Typography variant="caption" color="text.secondary">
                    {formatFileSize(data.cover.size)}
                  </Typography>
                </Box>
              </Box>
            </Box>
          )}

          {/* 图片内容 */}
          {data.contentType === ContentType.IMAGE && data.images && data.images.length > 0 && (
            <Box>
              <Typography variant="subtitle2" gutterBottom>
                图片文件 ({data.images.length}张)
              </Typography>
              <Grid container spacing={2}>
                {data.images.map((image, index) => (
                  <Grid size={{ xs: 6, sm: 4, md: 3 }} key={index}>
                    <Card>
                      <CardMedia
                        component="img"
                        height="100"
                        image={URL.createObjectURL(image)}
                        alt={`图片 ${index + 1}`}
                        sx={{ objectFit: 'cover' }}
                      />
                      <Box sx={{ p: 1 }}>
                        <Typography variant="caption" color="text.secondary" noWrap>
                          {image.name}
                        </Typography>
                        <Typography variant="caption" color="text.secondary" display="block">
                          {formatFileSize(image.size)}
                        </Typography>
                      </Box>
                    </Card>
                  </Grid>
                ))}
              </Grid>
            </Box>
          )}

          {/* 视频内容 */}
          {data.contentType === ContentType.VIDEO && data.video && (
            <Box>
              <Typography variant="subtitle2" gutterBottom>
                视频文件
              </Typography>
              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <video
                  src={URL.createObjectURL(data.video)}
                  controls
                  style={{
                    width: '100%',
                    maxWidth: '400px',
                    height: '250px',
                    objectFit: 'cover',
                    borderRadius: '8px',
                  }}
                />
                <Box>
                  <Typography variant="body2" color="text.secondary">
                    {data.video.name}
                  </Typography>
                  <Typography variant="caption" color="text.secondary">
                    {formatFileSize(data.video.size)}
                  </Typography>
                </Box>
              </Box>
            </Box>
          )}
        </Box>
      </Paper>

      {/* 提示信息 */}
      <Box sx={{ mt: 3, textAlign: 'center' }}>
        <Typography variant="body2" color="text.secondary">
          ✅ 请确认以上信息无误后点击"创建内容"按钮
        </Typography>
        <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
          创建后内容将进入处理队列，处理完成后即可发布
        </Typography>
      </Box>
    </Box>
  );
};

export default CreateSummary; 